<template>
	<view class="subsell">
		<view class="tabsBox">
			<view class="tabsitem" :class="{tabsitemed : currIndex ==0}" @click="handleTabs(0)">
				买方仓库
			</view>
			<view class="tabsitem" :class="{tabsitemed : currIndex ==1}" @click="handleTabs(1)">
				卖方仓库
			</view>
		</view>
		<view v-if="currIndex == 0" class="dataListBox">
			<view class="innerTabs">
				<!-- <view class="innerTabsItem" :class="{innerTabsItemed:buyIndex == 0}" @click="handleinnerTabs(0)">
					<view class="">
						全部
					</view>
					<view v-if="buyIndex == 0" class="heng"></view>
				</view> -->
				<view class="innerTabsItem" :class="{innerTabsItemed:buyIndex == 1}" @click="handleinnerTabs(1)">
					<view class="">
						待付款
					</view>
					<view v-if="buyIndex == 1" class="heng"></view>
				</view>
				<view class="innerTabsItem" :class="{innerTabsItemed:buyIndex == 2}" @click="handleinnerTabs(2)">
					<view class="">
						已付款
					</view>
					<view v-if="buyIndex == 2" class="heng"></view>
				</view>
				<view class="innerTabsItem" :class="{innerTabsItemed:buyIndex == 3}" @click="handleinnerTabs(3)">
					<view class="">
						待委托
					</view>
					<view v-if="buyIndex == 3" class="heng"></view>
				</view>
			</view>

			<view v-if="dataList.length" class="dataList">

				<view class="dataListitem" v-for="(item,index) in dataList" @click="handleOrderDetail(item)">
					<view v-if="item.status == 1" class="statu">
						待支付
					</view>
					<view v-if="item.status == 2" class="statu" style="background-color: #E4C673;">
						审核中
					</view>
					<view v-if="item.status == 3" class="statu" style="background-color: #979797;">
						已完成
					</view>
					<view class="bianhao">
						订单编号:{{item.order_no}}
					</view>
					<view class="content">
						<image :src="item.image" mode="" style="width: 170rpx; height: 170rpx;border-radius: 10rpx;">
						</image>
						<view class="contentRight">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price">
								拍中价格:￥{{item.all_price}}
							</view>
							<view class="maijia">
								<view class="maijiatext">
									卖家
								</view>
								<view class="maijianame">
									{{item.nickname}}<!-- ：15512345678 -->
								</view>
							</view>
						</view>
					</view>
					<view class="heng"></view>
					<view class="time">
						下单时间:{{item.created_at}}
					</view>

					<view class="itemBottom">
						<view v-if="item.status ==2 || item.status ==3" class="itemBottomleft">
							已支付：{{item.all_price}}
						</view>
						<view v-else class="itemBottomleft">
							需支付：{{item.all_price}}
						</view>
						<view v-if="item.status ==1" class="itemBottomright">
							<view class="btns">
								取消订单
							</view>
							<view class="btns btnss">
								去支付
							</view>
						</view>
						<view v-if="item.status ==2" class="itemBottomright">
							<view class="btns btnss">
								委托上架
							</view>
						</view>
						<!-- <view v-if="item.status ==3" class="itemBottomright">
							<view class="btns">
								上架
							</view>
							<view class="btns btnss">
								提取货物
							</view>
						</view> -->
					</view>

					<view v-if="item.flag" class="zz">
						<image src="@/static/image/ywc.png" mode=""
							style="width: 250rpx;height: 200rpx;margin-top: 40rpx;margin-left: 10rpx;"></image>
					</view>

				</view>

			</view>

			<view v-else class="">
				<u-empty mode="data" text="暂无订单">
				</u-empty>
			</view>

		</view>

		<view v-if="currIndex == 1" class="dataListBox">
			<view class="innerTabs">
				<!-- <view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 0}" @click="handleinnersellTabs(0)">
					<view class="">
						全部
					</view>
					<view v-if="sellIndex == 0" class="heng"></view>
				</view> -->
				<view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 1}" @click="handleinnersellTabs(1)">
					<view class="">
						待被拍
					</view>
					<view v-if="sellIndex == 1" class="heng"></view>
				</view>
				<view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 2}" @click="handleinnersellTabs(2)">
					<view class="">
						已被拍
					</view>
					<view v-if="sellIndex == 2" class="heng"></view>
				</view>
				<view class="innerTabsItem" :class="{innerTabsItemed:sellIndex == 3}" @click="handleinnersellTabs(3)">
					<view class="">
						已完成
					</view>
					<view v-if="sellIndex == 3" class="heng"></view>
				</view>
			</view>

			<view v-if="subsellList.length" class="dataList">

				<view class="dataListitem" v-for="(item,index) in subsellList" @click="handleDetail(item)">
					<view v-if="item.status == 0" class="statu">
						待拍卖
					</view>
					<view v-if="item.status == 1" class="statu" style="background-color: #E4C673;">
						已拍卖
					</view>
					<view v-if="item.status == 2 || item.status == 3" class="statu" style="background-color: #979797;">
						已完成
					</view>

					<view class="bianhao">
						<!-- 订单编号:213213215165165 -->
					</view>
					<view class="content">
						<image :src="item.image" mode="" style="width: 170rpx; height: 170rpx;border-radius: 10rpx;">
						</image>
						<view class="contentRight">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price">
								拍中价格:￥{{item.all_price}}
							</view>
							<view class="maijia">
								<view class="maijiatext">
									卖家
								</view>
								<view class="maijianame">
									{{item.nickname}}<!-- 15512345678 -->
								</view>
							</view>
						</view>
					</view>
					<view class="heng"></view>
					<view class="time">
						下单时间:{{item.created_at}}
					</view>

					<view class="itemBottom">
						<view v-if="item.status == 2 || item.status == 3" class="itemBottomleft">
							已支付：{{item.all_price}}
						</view>
						<view v-else class="itemBottomleft">
							已支付：{{item.all_price}}
						</view>

						<view v-if="item.status ==0" class="itemBottomright">
							<view class="btns btnss">
								查看详情
							</view>
						</view>
						<view v-if="item.status ==1" class="itemBottomright">
							<view class="btns btnss">
								查看付款凭证
							</view>
						</view>
						<view v-if="item.status ==2" class="itemBottomright">
							<view class="btns btnss">
								查看详情
							</view>
						</view>
					</view>

					<view v-if="item.flag" class="zz">
						<image src="@/static/image/ywc.png" mode=""
							style="width: 250rpx;height: 200rpx;margin-top: 40rpx;margin-left: 10rpx;"></image>
					</view>
				</view>
			</view>


			<view v-else class="">
				<u-empty mode="data" text="暂无订单">
				</u-empty>
			</view>

		</view>



		<view class="" style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {
		buyorderlist,
		sellorderlist
	} from "@/api/api.js"
	export default {
		data() {
			return {
				currIndex: 0,
				buyIndex: 1,
				sellIndex: 1,
				status: 1,
				dataList: [],
				subsellList: [],
				statusFlag: 0,
			}
		},

		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}

		},
		onShow() {
			this.handleGetbuyorderlist()
			this.handlesellorderlist()
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
				setTimeout(() => {
					if (this.currIndex == 0) {
						this.handleGetbuyorderlist();
					} else {
						this.handlesellorderlist();
					}
					uni.stopPullDownRefresh();
				}, 1000)


		},
		methods: {
			async handleGetbuyorderlist() {
				let res = await buyorderlist({
					status: this.status
				})
				console.log("买品列表", res)
				this.dataList = res.data.data
				this.dataList.forEach((item, index) => {
					
					if(item.pay_time == null){
						item.flag = false
					}else{
						// 获取当前日期和时间
						let currentDate = new Date();
						
						// 计算日期差值（单位：毫秒）
						let diff = currentDate.getTime() - new Date(item.pay_time).getTime();
						
						// 将毫秒转换为天数
						let diffDays = diff / (1000 * 3600 * 24);
						// 
						console.log("333??????????????????",diffDays)
						
						// 判断是否超过两天
						if (diffDays >= 2) {
							item.flag = true
							console.log("超出两天");
						} else {
							item.flag = false
							console.log("未超出两天");
						}
					}
					
				})
			},
			handleTabs(index) {
				this.currIndex = index
			},
			handleinnerTabs(index) {
				this.buyIndex = index
				if (index == 0) {
					this.status = -1
				} else {
					this.status = index
				}
				this.handleGetbuyorderlist()
			},
			async handlesellorderlist() {
				let res = await sellorderlist({
					status: this.statusFlag
				})
				this.subsellList = res.data.data
				this.subsellList.forEach((item, index) => {
					if(item.pay_time == null){
						item.flag = false
					}else{
						// 获取当前日期和时间
						let currentDate = new Date();
						
						// 计算日期差值（单位：毫秒）
						let diff = currentDate.getTime() - new Date(item.pay_time).getTime();
						
						// 将毫秒转换为天数
						let diffDays = diff / (1000 * 3600 * 24);
						// 
						console.log("333", new Date(item.pay_time).getTime(), currentDate.getTime(), diff,
							diffDays)
						
						// 判断是否超过两天
						if (diffDays >= 2) {
							item.flag = true
							console.log("超出两天");
						} else {
							item.flag = false
							console.log("未超出两天");
						}
					}
					
				})
				console.log("卖品", res)
			},
			handleinnersellTabs(index) {
				console.log("index", index)
				this.sellIndex = index
				if (this.sellIndex == 3) {
					this.statusFlag = 3
				} else {
					this.statusFlag = this.sellIndex - 1
				}
				this.handlesellorderlist()
			},
			handleDetail(item) {
				uni.navigateTo({
					url: `../subsell/subsellOrderdetail?id=${item.id}`
				})
				return
				if (item.flag == false) {
					uni.navigateTo({
						url: `../subsell/subsellOrderdetail?id=${item.id}`
					})
				}

			},
			handleOrderDetail(item) {
				if (item.flag == false) {
					uni.navigateTo({
						url: `./orderDetail?id=${item.id}`
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.subsell {
		.tabsBox {
			width: 690rpx;
			height: 68rpx;
			opacity: 1;
			// border: 2rpx solid #359691;
			margin: 20rpx auto;
			display: flex;
			justify-content: space-between;

			.tabsitem {
				width: 270rpx;
				height: 68rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #707070;
				line-height: 68rpx;
				text-align: center;
				border: 1rpx solid #359691;
			}

			.tabsitemed {

				background: #359691;
				color: #ffffff;
			}
		}

		.innerTabs {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.innerTabsItem {
				width: 33.33%;
				height: 80rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 80rpx;
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;

				.heng {
					width: 40rpx;
					height: 4rpx;
					background: #359691;
					border-radius: 304rpx 304rpx 304rpx 304rpx;
					margin-top: 16rpx;
				}
			}

			.innerTabsItemed {
				background-color: #359691;
				color: #ffffff;
			}
		}

		.dataList {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.dataListitem {
				width: 100%;
				height: 384rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				margin-bottom: 30rpx;
				padding: 18rpx 30rpx;
				box-sizing: border-box;
				position: relative;

				.zz {
					width: 100%;
					height: 384rpx;
					background: rgba(0, 0, 0, 0.7);
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.statu {
					width: 90rpx;
					height: 38rpx;
					background: #359691;
					border-radius: 0rpx 8rpx 0rpx 8rpx;
					opacity: 1;
					font-size: 20rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 38rpx;
					text-align: center;
					position: absolute;
					top: 0;
					right: 0;
				}

				.bianhao {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #707070;
					line-height: 28rpx;
				}

				.content {
					display: flex;
					width: 100%;
					margin-top: 20rpx;

					.contentRight {
						height: 170rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 30rpx;

						.name {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 28rpx;
						}

						.price {
							font-size: 28rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 400;
							color: #707070;
							line-height: 28rpx;
						}

						.maijia {
							display: flex;
							height: 36rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							opacity: 1;
							border: 2rpx solid #359691;

							.maijiatext {
								width: 78rpx;
								height: 36rpx;
								background: #359691;
								color: #ffffff;
								font-size: 28rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								line-height: 36rpx;
								text-align: center;
							}

							.maijianame {
								width: 292rpx;
								font-size: 28rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								font-weight: 400;
								color: #707070;
								line-height: 36rpx;
								text-align: center;
							}
						}
					}
				}

				.heng {
					width: 100%;
					height: 1rpx;
					background-color: #D8D8D8;
					margin-top: 20rpx;
				}

				.time {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #707070;
					line-height: 28rpx;
					margin-top: 20rpx;
				}

				.itemBottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;

					.itemBottomleft {
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 28rpx;
					}

					.itemBottomright {
						display: flex;
						height: 28rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 400;

						.btns {
							height: 36rpx;
							border-radius: 512rpx 512rpx 512rpx 512rpx;
							opacity: 1;
							border: 2rpx solid #359691;
							padding: 0 24rpx;
							color: #359691;
							line-height: 36rpx;
						}

						.btnss {
							background-color: #359691;
							color: #ffffff;
							margin-left: 24rpx;
						}
					}
				}


			}
		}

	}
</style>